<template>
  <div class="addcourse-main">
    <el-button type="primary" class="addcourse-button" @click="showAddDialog">新增课程</el-button>

    <!-- 新增课程的对话框 -->
    <el-dialog title="新增课程" v-model="editDialogVisible">
      <el-form :model="addForm" label-width="80px" :rules="rules">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="课程学时">
          <el-input-number
            v-model="addForm.hours"
            :step="2"
            controls-position="right"
            step-strictly
            placeholder="请输入学时"></el-input-number>
          <span class="hours-text">(学时范围: 2~100)</span>
        </el-form-item>
        <el-form-item label="课程类型" prop="ctype">
          <el-select v-model="addForm.ctype" placeholder="请选择课程类型">
            <el-option label="必修" value="必修"></el-option>
            <el-option label="选修" value="选修"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveAddCourse">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { courseStore } from '@/stores/course'
import { reactive, ref } from 'vue'
import { ElMessage, type FormRules } from 'element-plus'
// 获取store缓存的引用，为当前登录老师的课程
const coursesR = courseStore().coursesS

// cid
const cidR = courseStore().idS

// 添加对话框显示标志
const editDialogVisible = ref(false)

// 新增课程默认值
const addForm = ref({
  cid: cidR.value,
  uid: coursesR.value[0].uid,
  name: '',
  hours: 2,
  ctype: '',
  remainhours: 2
})

// 显示添加对话框
const showAddDialog = () => {
  editDialogVisible.value = true
}

const saveAddCourse = () => {
  // 检查学时是否在规定的范围内
  if (addForm.value.hours < 2 || addForm.value.hours > 100) {
    hoursWarn() // 弹出警告
    return // 退出函数，不保存更改
  }
  if (!addForm.value.name) {
    namesWarn()
    return
  }
  if (!addForm.value.ctype) {
    ctypesWarn()
    return
  }
  addForm.value.remainhours = addForm.value.hours
  console.log(addForm.value.remainhours)
  coursesR.value.push(addForm.value)
  // cid递增
  cidR.value++
  // 还原为课程默认值
  addForm.value = {
    cid: cidR.value,
    uid: coursesR.value[0].uid,
    name: '',
    hours: 2,
    ctype: '',
    remainhours: 2
  }
  // 关闭编辑对话框
  editDialogVisible.value = false
}

const hoursWarn = () => {
  ElMessage({
    showClose: true,
    message: '警告, 学时不在规定范围内！',
    type: 'warning'
  })
}
const namesWarn = () => {
  ElMessage({
    showClose: true,
    message: '错误, 请输入课程名称！',
    type: 'error'
  })
}
const ctypesWarn = () => {
  ElMessage({
    showClose: true,
    message: '错误, 请选择课程类型！',
    type: 'error'
  })
}
interface RuleForm {
  name: string
  ctype: string
}
// 校验规则
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入课程名称', trigger: 'blur' },
    { min: 1, max: 20, message: '课程名称长度应在1~20', trigger: 'blur' }
  ],
  ctype: [
    {
      required: true,
      message: '请选择课程类型',
      trigger: 'change'
    }
  ]
})
</script>
<style scoped>
.addcourse-main {
  margin: 10px 0;
}
.hours-text {
  color: red;
  margin-left: 3%;
}
</style>
